<!-- eslint-disable vue/no-dupe-keys -->
<script setup lang="ts">
import { ref, watch } from 'vue'
import { message } from '@/utils/message'
import { FormInstance } from 'element-plus'
import { addMenu, updateMenu } from '@/api/system/menu'
import { useDicts } from '@/utils/dict'
import { ClickOutside as vClickOutside } from 'element-plus'
import { useGlobal } from '@pureadmin/utils'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
  },
  menuOptions: {
    type: Array,
  },
  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const { $config } = useGlobal<GlobalPropertiesApi>()
const title = ref(props.title)
const menuOptions = ref(props.menuOptions)
const ruleFormRef = ref<FormInstance>()
const formVisible = ref(false)
const formData = ref(props.data)
const showChooseIcon = ref(false)
const iconSelectRef = ref(null)

const { sys_show_hide, sys_normal_disable } = useDicts('sys_show_hide', 'sys_normal_disable')
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (formData.value.osType !== 0) {
        formData.value.osType = $config.OSType
      }
      if (formData.value.menuId != undefined) {
        updateMenu({ ...formData.value, isCache: '1' }).then((_) => {
          message('提交成功', { type: 'success' })
          emit('refresh')
          formVisible.value = false
          resetForm(formEl)
        })
      } else {
        addMenu(formData.value).then((_) => {
          message('新增成功', { type: 'success' })
          emit('refresh')
          formVisible.value = false
          resetForm(formEl)
        })
      }
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

/** 展示下拉图标 */
const showSelectIcon = () => {
  iconSelectRef.value.reset()
  showChooseIcon.value = true
}

/** 选择图标 */
const selected = (name) => {
  formData.value.icon = name
  showChooseIcon.value = false
}

/** 图标外层点击隐藏下拉列表 */
const hideSelectIcon = (event) => {
  const elem = event.relatedTarget || event.srcElement || event.target || event.currentTarget
  const className = elem.className
  if (className !== 'el-input__inner') {
    showChooseIcon.value = false
  }
}

const closeDialog = () => {
  formVisible.value = false
  resetForm(ruleFormRef.value)
}

const emit = defineEmits(['update:visible', 'refresh'])
watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val)
  }
)

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val
  }
)

watch(
  () => props.title,
  (val) => {
    title.value = val
  }
)

watch(
  () => props.menuOptions,
  (val) => {
    menuOptions.value = val
  }
)

watch(
  () => props.data,
  (val) => {
    formData.value = val
  }
)

const rules = {
  postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
  postCode: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
  postSort: [{ required: true, message: '岗位顺序不能为空', trigger: 'blur' }],
}
</script>

<template>
  <el-dialog
    v-model="formVisible"
    :close-on-click-modal="false"
    :title="title"
    class="common-dialog"
    :before-close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级菜单">
            <el-tree-select
              v-model="formData.parentId"
              :data="menuOptions"
              :props="{
                value: 'menuId',
                label: 'menuName',
                children: 'children',
              }"
              value-key="menuId"
              placeholder="选择上级菜单"
              check-strictly
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="formData.menuType">
              <el-radio label="M">目录</el-radio>
              <el-radio label="C">菜单</el-radio>
              <el-radio label="F">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.menuType != 'F'" :span="24">
          <el-form-item label="菜单图标" prop="icon">
            <el-popover
              v-model:visible="showChooseIcon"
              placement="bottom-start"
              :width="540"
              trigger="click"
              @show="showSelectIcon"
            >
              <template #reference>
                <el-input
                  v-model="formData.icon"
                  v-click-outside="hideSelectIcon"
                  placeholder="点击选择图标"
                  readonly
                  @blur="showSelectIcon"
                >
                  <template #prefix>
                    <svg-icon
                      v-if="formData.icon"
                      :icon-class="formData.icon"
                      class="el-input__icon"
                      style="height: 32px; width: 16px"
                    />
                    <svg-icon v-else icon-class="search" />
                  </template>
                </el-input>
              </template>
              <IconSelect ref="iconSelectRef" @selected="selected" />
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="formData.menuName" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number v-model="formData.orderNum" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
        <el-col v-if="formData.menuType != 'F'" :span="12">
          <el-form-item>
            <template #label>
              <span>
                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                  <el-icon><question-filled /></el-icon> </el-tooltip
                >是否外链
              </span>
            </template>
            <el-radio-group v-model="formData.isFrame">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.menuType != 'F'" :span="12">
          <el-form-item prop="path">
            <template #label>
              <span>
                <el-tooltip
                  content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
                  placement="top"
                >
                  <el-icon><question-filled /></el-icon>
                </el-tooltip>
                路由地址
              </span>
            </template>
            <el-input v-model="formData.path" placeholder="请输入路由地址" />
          </el-form-item>
        </el-col>
        <el-col v-if="formData.menuType == 'C'" :span="12">
          <el-form-item prop="component">
            <template #label>
              <span>
                <el-tooltip
                  content="访问的组件路径，如：`system/user/index`，默认在`views`目录下"
                  placement="top"
                >
                  <el-icon><question-filled /></el-icon>
                </el-tooltip>
                组件路径
              </span>
            </template>
            <el-input v-model="formData.component" placeholder="请输入组件路径" />
          </el-form-item>
        </el-col>
        <el-col v-if="formData.menuType != 'M'" :span="12">
          <el-form-item>
            <el-input v-model="formData.perms" placeholder="请输入权限标识" maxlength="100" />
            <template #label>
              <span>
                <el-tooltip
                  content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
                  placement="top"
                >
                  <el-icon><question-filled /></el-icon>
                </el-tooltip>
                权限字符
              </span>
            </template>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.menuType == 'C'" :span="12">
          <el-form-item>
            <el-input v-model="formData.query" placeholder="请输入路由参数" maxlength="255" />
            <template #label>
              <span>
                <el-tooltip
                  content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`'
                  placement="top"
                >
                  <el-icon><question-filled /></el-icon>
                </el-tooltip>
                路由参数
              </span>
            </template>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.menuType == 'C'" v-show="false" :span="12">
          <el-form-item>
            <template #label>
              <span>
                <el-tooltip
                  content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
                  placement="top"
                >
                  <el-icon><question-filled /></el-icon>
                </el-tooltip>
                是否缓存
              </span>
            </template>
            <el-radio-group v-model="formData.isCache">
              <el-radio label="0">缓存</el-radio>
              <el-radio label="1">不缓存</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.menuType != 'F'" :span="12">
          <el-form-item>
            <template #label>
              <span>
                <el-tooltip
                  content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
                  placement="top"
                >
                  <el-icon><question-filled /></el-icon>
                </el-tooltip>
                显示状态
              </span>
            </template>
            <el-radio-group v-model="formData.visible">
              <el-radio v-for="dict in sys_show_hide" :key="dict.value" :label="dict.value">{{
                dict.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col v-if="formData.menuType != 'F'" :span="12">
          <el-form-item>
            <template #label>
              <span>
                <el-tooltip
                  content="选择停用则路由将不会出现在侧边栏，也不能被访问"
                  placement="top"
                >
                  <el-icon><question-filled /></el-icon>
                </el-tooltip>
                菜单状态
              </span>
            </template>
            <el-radio-group v-model="formData.status">
              <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
                dict.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
    </template>
  </el-dialog>
</template>
